import React, { useState, useRef } from 'react';
import { useIntl } from 'umi';

import { Button, Select } from 'antd';
import { ProTable } from '@ant-design/pro-table';

import style from './index.less';
import AddCustomerAccount from '@/components/AddCustomerAccount';
import CheckCustomerAccount from '@/components/CheckCustomerAccount';

const AccountCustomer: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const actionRef = useRef();

  const [open, setOpen] = useState(false);
  const [checkOpen, setCheckOpen] = useState(false);
  // 点击修改时传递数据到回显
  const [echoData, setEchoData] = useState({});
  const { Option } = Select;

  // 修改开关
  const showDrawer = () => {
    setEchoData({});
    setOpen(true);
  };
  // 修改开关
  const onClose = (value) => {
    setOpen(value);
  };

  // 查看开关

  const showCheckDrawer = () => {
    setCheckOpen(true);
  };
  const onCheckClose = (value) => {
    setCheckOpen(value);
  };

  const columns = [
    {
      title: () => <>{t('form.accountTitle')}</>,
      // title: '账户名称',
      dataIndex: 'largeAmount',
      key: 'largeAmount',
      align: 'center',
      render: (text) => <a>{text}</a>,
    },
    {
      title: () => <>{t('form.BankCardNo')}</>,
      // title: 'No',
      dataIndex: 'largeAmountsa',
      key: 'largeAmountsa',
      align: 'center',
      hideInTable: true,
    },
    {
      // title: '账户号码',
      title: () => <>{t('form.AccountNo')}</>,
      dataIndex: 'currency',
      key: 'currency',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: () => <>{t('form.Bankname')}</>,
      // title: '银行名称',
      dataIndex: 'money',
      key: 'money',
      align: 'center',
      hideInSearch: true,
    },
    {
      // title: '支行号',
      title: () => <>{t('form.PaymentbankNo')}</>,
      key: ' serialNumber',
      dataIndex: 'serialNumber',
      align: 'center',
      hideInSearch: true,
    },
    {
      // title: '币种',
      title: () => <>{t('form.currency')}</>,
      key: ' transaction',
      dataIndex: 'transaction',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: () => <>{t('form.Country')}</>,
      // title: '国家',
      key: 'billingTime',
      dataIndex: 'billingTime',
      align: 'center',
      hideInSearch: true,
    },
    {
      // title: '地区',
      title: () => <>{t('form.Region')}</>,
      key: ' account',
      dataIndex: 'serialNumber',
      align: 'center',
      hideInSearch: true,
    },
    {
      // title: '城市',
      title: () => <>{t('form.City')}</>,
      key: ' remarks',
      dataIndex: 'remarks',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: () => <>{t('form.SpecificAddress')}</>,
      // title: '具体地址',
      key: ' remarks',
      dataIndex: 'remarks',
      align: 'center',
      hideInSearch: true,
    },
    {
      // title: '状态',
      title: () => <>{t('form.State')}</>,
      key: ' remarks',
      dataIndex: 'remarks',
      align: 'center',
    },
    {
      title: () => <>{t('form.Option')}</>,
      hideInSearch: true,
      // title: '操作',
      align: 'center',
      dataIndex: 'action',
      width: 180,
      render: (_, record) => {
        return (
          <>
            <Button
              size="small"
              type="link"
              onClick={() => {
                setCheckOpen(true);
                // 给回显组件传递数据
              }}
            >
              {/* 查看 */}
              {t('buttons.Details')}
            </Button>
            <Button
              size="small"
              type="link"
              onClick={() => {
                setOpen(true);
                // 给回显组件传递数据
                setEchoData(record);
              }}
            >
              {/* 修改 */}
              {t('buttons.Modify')}
            </Button>
          </>
        );
      },
    },
  ];

  const data = [
    {
      key: '1',
      largeAmount: '1',
      currency: 'John Brown',
      money: 32,
      serialNumber: 'New York No. 1 Lake Park',
      transaction: 'wdw',
      remarks: '1dqwd',
    },
    {
      key: '2',
      largeAmount: '2',
      currency: 'John Brown',
      money: 32,
      serialNumber: 'New York No. 1 Lake Park',
      transaction: 'wdw',
      remarks: '1dqwd',
    },
  ];
  return (
    <div className={style.AccountiDetailboss}>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        cardBordered
        form={{ labelWrap: true }}
        request={async (params = {}, sort, filter) => {
          console.log('params', params, 'sort', sort, 'filter', filter);

          return {
            data: data,
          };
        }}
        search={{
          labelWidth: 90,
          // span: 12,
          //   optionRender: ({ searchText, resetText }, { form }, dom) => [
          //     <Button
          //       key="searchText"
          //       type="primary"
          //       onClick={() => {
          //         form?.submit();
          //       }}
          //     >
          //       {/* {t("buttons.query")} */}
          //       提交
          //     </Button>,
          //     <Button
          //       key="resetText"
          //       onClick={() => {
          //         form?.resetFields();
          //       }}
          //     >
          //       {/* {t("buttons.Reset")} */}
          //       重置
          //     </Button>,
          //   ],
          //   collapseRender: (collapsed, showCollapseButton) => {
          //     return collapsed ? (
          //       <Button
          //         type="link"
          //         key="resetText"
          //         onClick={() => {
          //           console.log(
          //             'collapsed, showCollapseButton',
          //             collapsed,
          //             showCollapseButton,
          //           );
          //           setShowFlag(collapsed);
          //         }}
          //       >
          //         展开
          //         {/* {t("buttons.Open")} */}
          //       </Button>
          //     ) : (
          //       <Button
          //         type="link"
          //         key="resetText"
          //         onClick={() => {
          //           console.log(
          //             'collapsed, showCollapseButton',
          //             collapsed,
          //             showCollapseButton,
          //           );
          //           setShowFlag(collapsed);
          //         }}
          //       >
          //         关闭
          //         {/* {t("buttons.Close")} */}
          //       </Button>
          //     );
          //   },
        }}
        rowKey="id"
        options={false}
        pagination={{
          pageSize: 10,
          onChange: (page) => console.log(page),
        }}
        defaultSize="middle"
        toolBarRender={() => [
          <Button key="button" type="primary" onClick={showDrawer}>
            新增
            {/* {t("buttons.Add")} */}
          </Button>,
        ]}
      />

      <AddCustomerAccount
        echoData={echoData} // 数据回显从表格传递的数据流
        open={open}
        showDrawer={showDrawer}
        onClose={onClose}
      />

      <CheckCustomerAccount
        checkOpen={checkOpen}
        showCheckDrawer={showCheckDrawer}
        onCheckClose={onCheckClose}
      />
    </div>
  );
};

export default AccountCustomer;
